<template>
  <div>
    <div class='top'>
      <div class='big'>
        现有余额 <br>
        {{ userInfo.spreadCount }}
      </div>
      <div class='left'>
        现有积分 <br>
        &nbsp;&nbsp;&nbsp; {{ userInfo.integral }}
        &nbsp;&nbsp;&nbsp;  
      </div>
      <div class='right'>
        推广人数 <br>
        {{ userInfo.spreadCount }}
      </div>
    </div>
    <div>
      <van-grid class='grid-top' :column-num='2' :border=false gutter='15'>
        <van-grid-item @click='toCommission' icon='notes-o' text='推广数据' />
        <van-grid-item @click='toIntegralList' icon='balance-list-o' text='积分记录' />
        <van-grid-item @click='toSpreadBanner' icon='qr' text='二维码生成' />
        <van-grid-item @click='toSpreadComm' icon='cluster-o' text='推广佣金明细' />
        <van-grid-item @click='toExtrack' icon='balance-o' text='立即提现'  />
      </van-grid>
    </div>
  </div>
</template>
<script>
import { getUserInfo } from '@/api/login.js'

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    toCommission() {
      this.$router.push('/getComm')
    },
    toIntegralList() {
      this.$router.push('/integralList')
    },
    toSpreadBanner() {
      this.$router.push('/spreadBanner')
    },
    toSpreadComm() {
      this.$router.push('/spreadComm')
    },
    toExtrack(){
      this.$router.push('/extrack')
    },
    getUserInfo() {
      getUserInfo().then(res => {
        this.userInfo = res.data
      })
    }
  }

}
</script>
<style>
.top {
  background-image: url(https://wx.yixiang.co/static/images/promotionBg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 198px;
}

.grid-top {
  margin-top: 15px;
}

.big {
  padding-top: 30px;
  font-size: 25px;
  text-align: center;
  color: aliceblue;
}

.left {
  padding-top: 50px;
  padding-left: 40px;
  font-size: 15px;
  color: aliceblue;
  display: block;
  position: absolute
}

.right {
  padding-top: 50px;
  text-align: right;
  font-size: 15px;
  color: aliceblue;
  margin-right: 50px;
}
</style>
